パッケージからフォントをエクスポートする

フォントをアプリの一部として宣言するのではなく、 フォントを別のパッケージの一部として宣言できます。 これは、同じフォントを複数人で共有する便利な方法です。 いくつかの異なるプロジェクト、 またはパッケージを公開しているプログラマー向けパブ.dev。 このレシピでは次の手順を使用します。

1. フォントをパッケージに追加します。
2. パッケージとフォントをアプリに追加します。
3. フォントを使用します。

1. パッケージにフォントを追加する

パッケージからフォントをエクスポートするには、フォント ファイルをlibパッケージプロジェクトのフォルダー。フォント ファイルを直接配置できます。libフォルダーまたはサブディレクトリ内 (例:lib/fonts。

この例では、という名前の Flutter ライブラリがあると仮定します。awesome_packageに存在するフォントを使用してlib/fontsフォルダ。

awesome_package/
  lib/
    awesome_package.dart
    fonts/
      Raleway-Regular.ttf
      Raleway-Italic.ttf

2. パッケージとフォントをアプリに追加します

これで、パッケージ内のフォントを使用できるようになります。 を更新するpubspec.yamlの中にアプリのルートディレクトリ。

パッケージをアプリに追加する

追加するには、awesome_packageパッケージを依存関係として、 走るflutter pub add:

$ flutter pub add awesome_package

フォントアセットを宣言する

パッケージをインポートしたので、どこにインポートするかを Flutter に指示します。 からフォントを見つけますawesome_package。

パッケージフォントを宣言するには、フォントへのパスの先頭に次の文字を付けます。packages/awesome_package。 これにより、Flutter に次の内容を調べるように指示されます。libフォルダ フォントのパッケージの。

flutter:
  fonts:
    - family: Raleway
      fonts:
        - asset: packages/awesome_package/fonts/Raleway-Regular.ttf
        - asset: packages/awesome_package/fonts/Raleway-Italic.ttf
          style: italic

3. フォントを使用する

使うTextStyleテキストの外観を変更します。 パッケージフォントを使用するには、使用したいフォントを宣言し、 フォントがどのパッケージに属しているか。

child: Text(
  'Using the Raleway font from the awesome_package',
  style: TextStyle(
    fontFamily: 'Raleway',
  ),
),

完全な例

フォント

Raleway フォントと RobotoMono フォントは次からダウンロードされました。Google フォント。

pubspec.yaml

name: package_fonts
description: An example of how to use package fonts with Flutter

dependencies:
  awesome_package:
  flutter:
    sdk: flutter

dev_dependencies:
  flutter_test:
    sdk: flutter

flutter:
  fonts:
    - family: Raleway
      fonts:
        - asset: packages/awesome_package/fonts/Raleway-Regular.ttf
        - asset: packages/awesome_package/fonts/Raleway-Italic.ttf
          style: italic
  uses-material-design: true

main.dart

import 'package:flutter/material.dart';

void main() => runApp(const MyApp());

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return const MaterialApp(
      title: 'Package Fonts',
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatelessWidget {
  const MyHomePage({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      // The AppBar uses the app-default font.
      appBar: AppBar(title: const Text('Package Fonts')),
      body: const Center(
        // This Text widget uses the Raleway font.
        child: Text(
          'Using the Raleway font from the awesome_package',
          style: TextStyle(
            fontFamily: 'Raleway',
          ),
        ),
      ),
    );
  }
}